const path=require("path")

// 1、下载引入插件（分离文本：extractTextWebpackPlugin@next ）
///2、引入这个插件
const extractTextWebpackPlugin=require("extract-text-webpack-plugin")

module.exports={
    context:path.join(__dirname,"./src") ,
    entry:"./js/main.js", 
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js",
    }, 

 
  
    module:{
        rules:[
            {
                test: /\.css$/,

                //3、配置插件 
                use:extractTextWebpackPlugin.extract({
                    fallback:"style-loader", //把css添加到html中
                    use:"css-loader"//解析css语法
                })

            }

        ] 


    } ,

    plugins:[

        // 4、配置css的出口文件，把css从bundle.js中分离出来，放到css文件中
        new extractTextWebpackPlugin("./css/index.css")

        // 5、在项目中把webpack再下载 npm  i  webpack@4 -dist

        // 6、在命令行执行 ：webpack

    ] //插件配置




    
    // mode: 项目环境类型：生产production（上线所需环境）环境和开发development（开发代码所需）环境

}



